<template>
  <div class="content">
    <div class="top">
      <div>
        应巡次数12500
      </div>
    </div>
    <div class="bottom">
      <div>
        <div class="icon">
          <img src="../../../assets/rightCenter1.png" alt="">
        </div>
        <div class="info">
          <div class="title">巡检车辆</div>
          <div class="num">102</div>
        </div>
      </div>
      <div>
        <div class="icon">
          <img src="../../../assets/rightCenter2.png" alt="">
        </div>
        <div class="info">
          <div class="title">本周应巡次数</div>
          <div class="num">102</div>
        </div>
      </div>
      <div>
        <div class="icon">
          <img src="../../../assets/rightCenter3.png" alt="">
        </div>
        <div class="info">
          <div class="title">在线人员</div>
          <div class="num">102</div>
        </div>
      </div>
      <div>
        <div class="icon">
          <img src="../../../assets/rightCenter4.png" alt="">
        </div>
        <div class="info">
          <div class="title">发现缺陷</div>
          <div class="num">102</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    height: 100%;
    .top {
        padding: 5.5vh 0 0 .5vw;
        > div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 204px;
            height: 33px;
            background: url('../../../assets/rightCenter.png') no-repeat;
            background-size: 100% 100%;
        }

    }
    .bottom {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        > div {
            width: 50%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
                margin-right: 10px;
            }
            .info {
                height: 100%;
                display: flex;
                justify-content: space-around;
                flex-direction: column;

                .title {
                    color: #52CCFF;
                    font-size: 16px;
                }
                .num {
                    font-family: 'bigfont';
                    text-shadow: 0 0 0.5em #078792, 0 0 0.5em #078792;
                    font-size: 20px;
                    text-indent: 5px;
                }
            }
        }
    }
}
</style>
